<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屌丝科技智能儿童房</title>
    <!-- <img src="hqyj.jpg"> 添加图片 -->
    <style>
        body{
            margin:0;/* 外边距 */
            height: 100vh; /*浏览器视图高度 */
            /* background-color: #eee; */
            background-image: url('2o.jpg'); /* 替换为你的图片路径 */  
            background-size: cover; /* 背景图覆盖整个区域 */  
            background-repeat: no-repeat; /* 不重复背景图 */  
            background-position: center; /* 背景图位置居中 */  
            /* 下列是加湿器的 */
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh; 
            /* 空调开关 */
            font-family: Arial, sans-serif;  
        }
  
        canvas {  
            border: 1px solid #ccc;  
            
        }  
        /* 下两个是空调开关 */
        #toggleButton {  
            padding: 10px 20px;  
            font-size: 18px;  
            cursor: pointer;  
            border: none;  
            border-radius: 5px;  
        }  
        #status {  
            margin-top: 20px;  
            font-size: 24px;  
            color: #333;  
        }  
        .control-panel {  
            display: flex;  
            justify-content: space-between;  
            margin-bottom: 40px;  
            align-items: flex-end;
        }  
        .toggle-button3{  
            padding: 10px 10px;  
            cursor: pointer;  
            background-color: #f0f0f0;  
            border: 3px solid #ccc;  
            margin: 3px;  
            /* //弧度 */
            border-radius: 45px;  
            text-align: center;  
            width: 80px;  
        }  
        .item {  
    margin-top: 20px; /* 方法 1: 使用 margin */  
    /* transform: translateY(20px);  方法 4: 使用 transform */  
    /* padding-top: 20px;  方法 3: 使用 padding */  
}  
        .status3 {  
            font-size: 16px;  
            margin-left: 10px;  
        }  
        .data-display {  
            margin-bottom: 20px;  
        }  
        .container {  
            display: flex;  
            justify-content: center;  /* 横向居中 */  
            align-items: center;      /* 纵向居中 */  
            height: 200px;            /* 设置容器高度 */  
            border: 1px solid #000;  /* 添加边框以便于查看 */  
        }
            /* 通用选择 */
            *{
border: 1px solid black ;
            }
            /* 行块 */
            .flex{
                display: flex;
            }
            .baiSe{
                background-color: white;
            }
            /* 主区域占满所有，这是个横向块 */
            .flex1{
                flex:1;
            }
            /* 列块 */
    .column{
        flex-direction: column;
    }
    /* 左边距 */
    .mg8{
        margin: 8px;
    }
    /* 右边距 */
    .mgr8{
        margin-right: 8px;
    }
    /* 上边距 */
    .mgt8{
        margin-top: 8px;
    }
      /* 开关按钮 */
  .btn-on{
    width: 60px;
    height: 25px;
    margin: 0 3px;
    border-radius: 25px;
    font-size: 14px;

    cursor: pointer;
    position: relative;
    border: 1px solid white;
    background-color: #12B090;
  }
  .btn-on-circle{
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    transition: all .5s;
  }
  .btn-on-text{
    position: absolute;
    right: 10px;
    line-height: 25px;
    color: white;
    transition: all .5s;
  }
  .btn-on1{
    width: 60px;
    height: 25px;
    margin: 0 3px;
    border-radius: 25px;
    font-size: 14px;

    cursor: pointer;
    position: relative;
    border: 1px solid white;
    background-color: #12B090;
  }
  .btn-on-circle1{
    position: absolute;
    width: 15px;
    height: 15px;
    top: 5px;
    left: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    transition: all .5s;
  }
  .btn-on-text1{
    position: absolute;
    right: 10px;
    line-height: 25px;
    color: white;
    transition: all .5s;
  }
    .yinYing{
        box-shadow: rgb(0 0 0/20%)0px 2px 1px -1px ,       
        rgb(0 0 0/14%)0px 1px 1px 0px,rgb(0 0 0/12%)0px 1px 3px 0px;
    }
    .daoHang{
        padding: 10px 20px;
        border-bottom: 1px solid gray;
        font: size 14px; 
        /* color:#666; */
        background-color: #FAEBD7
    }
    .rotate {  
            transform: rotate(90deg); /* 旋转90度 */  
            display: inline-block; /* 让旋转的图片正常显示 */  
        }  
        .plugin {  
            min-width: 150px; /* 每个插件的最小宽度 */  
            margin: 10px; /* 四周的间距 */  
            padding: 10px;  
            border: 1px solid #ccc;  
            border-radius: 5px;  
            text-align: center;  
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
            background-color: #fff;  
        }  

    @media(max-width:600px){
        .ceBian{
            display: none;
        }
        .neiRong{
            flex-direction: column;
        }
        .shuJuQu{
            flex-direction: column;
        }
        .YouQu{
            margin-left: 8px;
        }
        .shuJu{
            margin: 0 0 8px;
            flex:auto;
        }  
    }
    </style>

</head>
<body class="flex" onload="init()">
    <!-- 侧边栏 -->
    <div style="width: 200px;z-index: 2;" class="ceBian  yinYing">
    <!-- 头像栏 -->
    <div style="padding: 10px;align-items: center;border-bottom: 1px solid #999;"   
    class="flex">
        <img src="preview.jpg" wigth="40px" height="40px"   alt="" />
    <div style="margin-left:10px;">VIP</div>
    </div>
    <!-- 导航栏 -->
    <div class="flex1">
<div  class="daoHang" style="opacity: 0.5;">导航1
    </div>
</div>
<div class="daoHang">导航2</div>
<div class="daoHang">导航3</div>
<div class="daoHang">导航4</div>
    </div>
</div>
            <!-- 主区域 -->
    <div class="flex1 flex column">
            <!-- 头部栏 -->
            <div style="height: 60px;z-index: 1;" class="container">
                <br  />  欢迎来到我们的家具管理系统！
               
            </div>
            <!-- 内容区 -->
    <div style="overflow:auto"class="flex1 flex">
                <!-- 左区 -->
    <div style="flex:2" class="flex column mg8">
            <!-- 数据区 -->
            <div  class="flex shuJuQu">
                <!-- 数据块 -->
                <!-- <div style="height: 100px" class="shuJu flex1 baiSe mgr8 yinYing">
                    <!-- style="color:salmon;background-color:skyblue;" -->
                    <!-- <div > -->
                        <!-- form是表单块的功能 -->
                   
                            <!-- <br />
                            温度<input type="text" id="temp" value="" style="color:salmon;background-color:skyblue;"/> -->
                            <!-- <br  /> -->
                     
                    <!-- </div>	
                </div> -->
                <!-- <div style="height: 100px" class="shuJu flex1 baiSe mgr8 yinYing">
                  
                        <br />
                        湿度<input type="text" id="hum" value="" style="color:salmon;background-color:palegreen"/><br />
                </div>
                <div style="height: 100px" class="shuJu flex1 baiSe mgr8 yinYing"> -->
                  
                        <!-- <br />
                        光照<input type="text" id="ill" value="" style="color:salmon;background-color:yellow"/> -->
            <!-- </div>  -->
            <div class="data-display" class="shuJu flex1 baiSe mgr8 yinYing">  
                <p>空调温度: <span id="temperature">--</span> °C</p>  
                <p>湿度: <span id="humidity">--</span> %</p>  
                <p>当前室温: <span id="nowtemperature">--</span> °C</p>  
                <!-- lx -->
                <button onclick="getflush()">刷新数据</button>
                        <button onclick="reportData()">上报数据</button>
                <!-- <button onclick="refreshData()">刷新数据</button>  
                <button onclick="reportData()">上报数据</button>   -->
            </div> 
            <div class="flex"></br>亲爱的家长和小朋友们，感谢您选择我们的智能儿童房平台！
            </br>在这里，我们致力于为您和您的孩子创造一个安全、舒适且充满乐趣的居住环境。
        </br>通过我们的系统，您可以轻松管理儿童房的各种智能设备，提升生活品质。

    </br>无论是调节照明，还是控制温度湿度，或是实时监测环境，您都可以尽情体验科技带来的便利！
        </div>
        
                <!-- <div style="height: 160px" class="shuJu flex1 baiSe mgr8 yinYing"></div> -->
            </div>
            
            <!--列表区 -->
    <div class="flex column">
        <!-- 列表项 -->
        <div style="height: 160px" class="baiSe mgt8 yinYing">
            <!-- 跳转产品页面 -->
            <a href="2.html">产品</a>
            <!-- 跳转32页面 -->
            <a href="index.html">stm32示例页面</a>
            <a href="3.html">马达示例页面</a>
            <a href="4.html">风扇仪表盘</a>
            <a href="temp_modbus.html">modbus示例页面</a>
            <!-- <div class="control-panel">  
                <div class="item">  
                    <span class="toggle-button3" onclick="toggle('airConditioner')">空调: <span id="airConditioner" class="status3">OFF</span></span>  
                </div>  
                <div>  
                    <span class="toggle-button3" onclick="toggle('cooling')">制冷: <span id="cooling" class="status3">OFF</span></span>  
                </div>  
                <div>  
                    <span class="toggle-button3" onclick="toggle('heating')">制热: <span id="heating" class="status3">OFF</span></span>  
                </div>  
                <div>  
                    <span class="toggle-button3" onclick="toggle('curtains')">窗帘: <span id="curtains" class="status3">OFF</span></span>  
                </div>  
                <div>  
                    <span class="toggle-button3" onclick="toggle('projector')">投影屏: <span id="projector" class="status3">OFF</span></span>  
                </div>  
        </div> -->
        <div style="height: 160px" class="baiSe mgt8 yinYing flex">
            <!-- 加湿器humidityMeter -->
                <canvas id="110-1" width="100" height="100"></canvas>  
                <script>  
                    const canvas = document.getElementById('110-1');  
                    const ctx = canvas.getContext('2d');  
            
                    // 初始湿度值  
                    let humidity = 50;  
            
                    function drawGauge() {  
                        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布  
            
                        // 画表盘外圈  
                        ctx.beginPath();  
                        ctx.arc(50, 50, 33, 0.1 * Math.PI, 0.9 * Math.PI);  
                        ctx.lineWidth = 10;  
                        ctx.strokeStyle = '#FF0000';  //纯 白色 #ddd
                        ctx.stroke();  
            
                        // 画表盘内圈  
                        ctx.beginPath();  
                        ctx.arc(50, 50, 30, 0.1 * Math.PI, 0.9 * Math.PI);  
                        ctx.lineWidth = 10;  
                        ctx.strokeStyle = '#FFA500';  // 灰白色 #fff
                        ctx.stroke();  
            
                        // 画指针  
                        const angle = (humidity / 100) * 0.8 * Math.PI + 0.1 * Math.PI; // 转换湿度到角度  
                        const pointerLength = 20;  
                        const pointerX = 50 + pointerLength * Math.cos(angle - Math.PI / 2);  
                        const pointerY = 50 + pointerLength * Math.sin(angle - Math.PI / 2);  
            
                        ctx.beginPath();  
                        ctx.moveTo(50, 50);  
                        ctx.lineTo(pointerX, pointerY);  
                        ctx.lineWidth = 4;  
                        ctx.strokeStyle = 'steelblue';  
                        ctx.stroke();  
            
                        // 画湿度值  
                        ctx.fillStyle = 'black';  
                        ctx.font = 'bold 20px Arial';  
                        // 百分比显示的位置
                        ctx.fillText(`${humidity}%`, 35, 40);  
                    }  
            
                    // 模拟湿度变化  
                    function updateHumidity() {  
                        humidity = Math.floor(Math.random() * 101); // 随机湿度值 0 - 100  
                        drawGauge();  
                    }  
            
                    // 每2秒更新一次湿度  
                    setInterval(updateHumidity, 2000);  
            
                    // 初始绘制  
                    drawGauge();  
                </script>  
                        <!-- 开关按钮 -->
                        
<div class="btn-on" name="yj12" id="33" onclick="on_off()">
<!-- </br>火警开关 -->
    <!-- 圆点 -->
    <span class="btn-on-circle"></span>
    <!-- 文字 -->
    <span class="btn-on-text">ON</span>

</br>
    </br>火警开关
</div> 
  <div class="btn-on1" name="yj9"id="303-0" onclick="on_off2()">
    <!-- </br>火警开关 -->
        <!-- 圆点 -->
        <span class="btn-on-circle1"></span>
        <!-- 文字 -->
        <span class="btn-on-text1">ON</span>
      </div> 
    </br>
        <!-- </br>马达开关 动感节拍 -->
        <div>        <br><font color="red">加湿器:</font>
                            <br><font color="red">ON</font><input type="radio" name="yj10" id="304-1" onclick="set1(id)">
                            <font color="red">OFF</font><input type="radio" name="yj10" id="304-0" onclick="set1(id)"></div>
                         
                            
  
                          

 <!-- <div class="flex">

  </div>  -->
  <!-- <p class="btn-on"  id="2" onclick="on_off()"> -->
    <!-- 圆点 -->
    <!-- <span class="btn-on-circle" ></span> -->
    <!-- 文字 -->
    <!-- <span class="btn-on-text">ON</span> -->
  <!-- </p>  -->
  <!-- <font color="red">空调开关:</font>
  <font color="red">NO</font><input type="radio" name="kong" id="1" onclick="set_kong_open()">
  <font color="red">OFF</font><input type="radio" name="kong" id="2" checked="checked"
      onclick="set_kong_close()">
  <br>
  <font color="red">制热开关:</font>
  <font color="red">NO</font><input type="radio" name="zhileng" id="3" onclick="set_zhileng_open()">
  <font color="red">OFF</font><input type="radio" name="zhileng" id="4" checked="checked"
      onclick="set_zhileng_close()">
      <br>
      <font color="red">制冷开关:</font>
      <font color="red">NO</font><input type="radio" name="zhire" id="5" onclick="set_zhire_open()">
      <font color="red">OFF</font><input type="radio" name="zhire" id="6" checked="checked"
          onclick="set_zhire_close()">
      <br>
      <font color="red">窗帘开关:</font>
      <font color="red">NO</font><input type="radio" name="chuanglian" id="7" onclick="set_chuanglian_open()">
      <font color="red">OFF</font><input type="radio" name="chuanglian" id="8" checked="checked"
          onclick="set_chuanglian_close()">
      <br>
      <font color="red">投影屏开关:</font>
      <font color="red">NO</font><input type="radio" name="tou" id="9" onclick="set_tou_open()">
      <font color="red">OFF</font><input type="radio" name="tou" id="10" checked="checked"
          onclick="set_tou_close()"> -->
         
</div>
<!-- style="height: 160px" --> 
        <div  style="height: 150px;color:salmon;" >
            <font color="red">空调开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj1" id="101-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj1" id="101-0"
                                    onclick="set1(id)">
                                <font color="red">制热开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj2" id="104-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj2" id="104-0"
                                    onclick="set1(id)">
                                
                                <font color="red">制冷开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj3" id="103-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj3" id="103-0"
                                    onclick="set1(id)">
                                <br>
                                <font color="red">窗帘开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj4" id="105-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj4" id="105-0"
                                    onclick="set1(id)">
                               
                                <font color="red">投影屏开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj5" id="106-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj5" id="106-0"
                                    onclick="set1(id)">


                                <font color="red">32电风扇:</font>
                                <font color="red">ON</font><input type="radio" name="yj9" id="303-1" onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj9" id="303-0"
                                    onclick="set1(id)">
                                <br>
                                <font color="red">渐变彩灯:</font>
                                <font color="red">ON</font><input type="radio" name="yj11" id="305-1"
                                    onclick="set1(id)">

                                <font color="red">OFF</font><input type="radio" name="yj11" id="305-0"
                                    onclick="set1(id)">
                                <font color="red">火警开关:</font>
                                <font color="red">ON</font><input type="radio" name="yj12" id="306-1"
                                    onclick="set1(id)">
                                <font color="red">OFF</font><input type="radio" name="yj12" id="306-0"
                                    onclick="set1(id)">
                            </div>
        </div>
        <!-- <div  style="height: 100px;color:salmon;"class=" mgt8 yinYing" ></div> -->
    </div>
</div>
    <!-- 右区 -->
<div style="flex:2" class="youQu flex column mgr8 mgt8">
            <!-- 提示区 -->
            <div style="height: 150px" class=" yinYing">
                <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
            <body>  
                <!-- 折线图-->
                <script>  
                    // 控制开关状态  
                    function toggle(elementId) {  
                        const element = document.getElementById(elementId);  
                        if (element.innerText === "OFF") {  
                            element.innerText = "ON";  
                            // if()
                            alert(`${elementId} 已开启`);  
                        } else {  
                            element.innerText = "OFF";  
                            alert(`${elementId} 已关闭`);  
                        }  
                    }  
                    </script>
                <canvas id="myChart" width="400" height="200"></canvas> 
                <script>
                                                function getflush() {
                                var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
                                var url = ""; // 请求的URL，这个可以不写
                                xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
                                xhr.send("key");
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
                                        var response = xhr.responseText; // 获取响应数据
                                        console.log("resp = " + response);
                                        const jsonData = JSON.parse(response);
                                        const keyValue1 = jsonData.key1.data;
                                        const defaultRadio1 = document.getElementById("101-1");
                                        const defaultRadio2 = document.getElementById("101-0");
                                        if (keyValue1) {
                                            defaultRadio1.checked = true;
                                            defaultRadio2.checked = false;
                                        } else {
                                            defaultRadio1.checked = false;
                                            defaultRadio2.checked = true;
                                        }
                                        const keyValue2 = jsonData.key2.data;
                                        document.getElementById("temperature").innerText = keyValue2;
                                        const keyValue3 = jsonData.key3.data;
                                        const defaultRadio3 = document.getElementById("103-1");
                                        const defaultRadio4 = document.getElementById("103-0");
                                        if (keyValue3) {
                                            defaultRadio3.checked = true;
                                            defaultRadio4.checked = false;
                                            alert("全部状态已刷新成功");  
                                        } else {
                                            defaultRadio3.checked = false;
                                            defaultRadio4.checked = true;
                                            alert("刷新成功");  
                                        }
                                        const keyValue4 = jsonData.key4.data;
                                        const defaultRadio5 = document.getElementById("104-1");
                                        const defaultRadio6 = document.getElementById("104-0");
                                        if (keyValue4) {
                                            defaultRadio5.checked = true;
                                            defaultRadio6.checked = false;
                                            // alert("制热开关已打开！");  
                                        } else {
                                            defaultRadio5.checked = false;
                                            defaultRadio6.checked = true;
                                            // alert("制热开关已关闭！");
                                        }
                                        const keyValue5 = jsonData.key5.data;
                                        const defaultRadio7 = document.getElementById("105-1");
                                        const defaultRadio8 = document.getElementById("105-0");
                                        if (keyValue5) {
                                                defaultRadio7.checked = true;
                                                defaultRadio8.checked = false;
                                            } else {
                                                defaultRadio7.checked = false;
                                                defaultRadio8.checked = true;
                                            }
                                            const keyValue6 = jsonData.key6.data;
                                            const defaultRadio9 = document.getElementById("106-1");
                                            const defaultRadio10 = document.getElementById("106-0");
                                            if (keyValue6) {
                                                defaultRadio9.checked = true;
                                                defaultRadio10.checked = false;
                                            } else {
                                                defaultRadio9.checked = false;
                                                defaultRadio10.checked = true;
                                            }
                                            const keyValue7 = jsonData.key7.data;
                                            document.getElementById("nowtemperature").innerText = keyValue7;
                                            const keyValue8 = jsonData.key8.data;
                                            document.getElementById("humidity").innerText = keyValue8;
                                            const keyValue9 = jsonData.key9.data;
                                            const defaultRadio11 = document.getElementById("303-1");
                                            const defaultRadio12 = document.getElementById("303-0");
                                            if (keyValue9) {
                                                defaultRadio11.checked = true;
                                                defaultRadio12.checked = false;
                                            } else {
                                                defaultRadio11.checked = false;
                                                defaultRadio12.checked = true;
                                            }
                                            const keyValue10 = jsonData.key10.data;
                                            const defaultRadio13 = document.getElementById("304-1");
                                            const defaultRadio14 = document.getElementById("304-0");
                                            if (keyValue10) {
                                                defaultRadio13.checked = true;
                                                defaultRadio14.checked = false;
                                            } else {
                                                defaultRadio13.checked = false;
                                                defaultRadio14.checked = true;
                                            }
                                            const keyValue11 = jsonData.key11.data;
                                            const defaultRadio15 = document.getElementById("305-1");
                                            const defaultRadio16 = document.getElementById("305-0");
                                            if (keyValue11) {
                                                defaultRadio15.checked = true;
                                                defaultRadio16.checked = false;
                                            } else {
                                                defaultRadio15.checked = false;
                                                defaultRadio16.checked = true;
                                            }
                                            const keyValue12 = jsonData.key12.data;
                                            const defaultRadio17 = document.getElementById("306-1");
                                            const defaultRadio18 = document.getElementById("306-0");
                                            if (keyValue12) {
                                                defaultRadio17.checked = true;
                                                defaultRadio18.checked = false;
                                            } else {
                                                defaultRadio17.checked = false;
                                                defaultRadio18.checked = true;
                                            }
                                            xhr.send("modbus_set");
                                            //console.log(keyValue1, keyValue3, keyValue4);
                                        }
                                    }
                                }
                            function getst32() {
                                var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
                                var url = ""; // 请求的URL，这个可以不写
                                xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
                                xhr.send("key");
                                xhr.onreadystatechange = function () {
                                    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
                                        var response = xhr.responseText; // 获取响应数据
                                        console.log("resp = " + response);
                                        const jsonData = JSON.parse(response);
                                       
                                       
                                        const keyValue7 = jsonData.key8.data;
                                        const keyValue8 = jsonData.key10.data;
                                        const keyValue9 = jsonData.key11.data;
                                        const keyValue10 = jsonData.key12.data;
                                        //console.log(keyValue1, keyValue3, keyValue4);
                                    };
                                }
                            }
                    function set1(id) {
                        var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
                        var url = ""; // 请求的URL，这个可以不写
                        // document.getElementById("data1").value 
                        console.log(id);
                        xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
            
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
                                var response = xhr.responseText; // 获取响应数据
                                console.log("resp = " + response);
                            }
                        };
            
                        xhr.send(id); // 发送请求，并将数据转换为JSON字符串
                    }
                    function get(id) {
            
                        var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
                        var url = ""; // 请求的URL，这个可以不写
                        xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
                        xhr.send("key");
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
                                var response = xhr.responseText; // 获取响应数据
                                console.log("resp = " + response);
                                const jsonData = JSON.parse(response);
                                const keyValue1 = jsonData.key1.data;
                                const keyValue2 = jsonData.key2.data;
                                const keyValue3 = jsonData.key3.data;
                                const keyValue4 = jsonData.key4.data;
                                const keyValue5 = jsonData.key5.data;
                                const keyValue6 = jsonData.key6.data;
                                const keyValue7 = jsonData.key7.data;
                                const keyValue8 = jsonData.key8.data;
                                const keyValue9 = jsonData.key9.data;
                                const keyValue10 = jsonData.key10.data;
                                const keyValue11 = jsonData.key11.data;
                                console.log(keyValue1,keyValue2,keyValue11);
                            }
                        }
            
            
            
            
                    }
                </script> 
                <script>  
                    const btx = document.getElementById('myChart').getContext('2d');   
                    const myChart = new Chart(btx, {  
                        type: 'line', // 可以是 'bar', 'line', 'pie', 等等  
                        // 目前写死了数据
                        data: {  
                            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'],  
                            datasets: [{  
                                label: '样本数据',  
                                data: [65, 59, 80, 81, 56, 55, 40,99,33,22],  
                                fill: false,  
                                borderColor: 'rgb(75, 192, 192)',  
                                tension: 0.1  
                            }]  
                        },  
                        options: {  
                            scales: {  
                                y: {  
                                    beginAtZero: true  
                                }  
                            }  
                        }  
                    });  
                </script>  
                  <script>
                    function on_off(type){
                        var i=0;
                      var btn = document.getElementsByClassName("btn-on")[i];
                      var circle = document.getElementsByClassName("btn-on-circle")[i];
                      var text = document.getElementsByClassName("btn-on-text")[i];
                
                      if(!type){
                        btn.style= "background-color: #ccc;"
                        circle.style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
                        text.style="right: 30px;color: #888;";
                        text.innerText="OFF";
                      } else {
                        btn.style= ""
                        circle.style="";
                        text.style="";
                        text.innerText="ON";
                      }
                      btn.setAttribute("onclick", "on_off(" + !type + ")"); // 修改状态
                }
                    on_off(false)// 关闭按钮
                    function on_off2(type){
                        var i=0;
                      var btn = document.getElementsByClassName("btn-on1")[i];
                      var circle = document.getElementsByClassName("btn-on-circle1")[i];
                      var text = document.getElementsByClassName("btn-on-text1")[i];
                
                      if(!type){
                        btn.style= "background-color: #ccc;"
                        circle.style="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
                        text.style="right: 30px;color: #888;";
                        text.innerText="OFF";
                      } else {
                        btn.style= ""
                        circle.style="";
                        text.style="";
                        text.innerText="ON";
                      }
                      btn.setAttribute("onclick", "on_off2(" + !type + ")"); // 修改状态
                }
                    on_off2(false)// 关闭按钮
                  </script>
                  <script>
                       function on_off1(type){
                      var btn1= document.getElementsByClassName("btn-on1")[1];
                      var circle1 = document.getElementsByClassName("btn-on-circle1")[1];
                      var text1 = document.getElementsByClassName("btn-on-text1")[1];
                
                      if(!type){
                        btn.style1= "background-color: #ccc;"
                        circle.style1="left: 40px;background-color: #888;box-shadow: 0 0 10px #888;";
                        text.style1="right: 30px;color: #888;";
                        text.innerTex1="OFF";
                      } else {
                        btn.style1= ""
                        circle.style1="";
                        text.style1="";
                        text.innerText1="ON";
                      }
                      btn1.setAttribute("onclick", "on_off1(" + !type1 + ")"); // 修改状态
                }
                    on_off1(false)// 关闭按钮
                  </script>
                  <script>
                    function get_info() {
                        var v = document.getElementsByName("wenshidu");//搜索所有名字为1的标签
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.onreadystatechange = function ()//状态发生改变
                        {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                var z = xhr.responseText;//响应正文
                                //var x = z.split(",");//拼接
                                v[0].value = x.split(",")[0];
                                v[1].value = x.split(",")[1];
                                var response = xhr.responseText;      
                            }
                        }
                        xhr.send("modbus_get");//消息正文
                    }
                    function set_kong_open() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set01");//消息正文
                    }
                    function set_kong_close() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set00");//消息正文
                    }
                    function set_zhileng_open() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set11");//消息正文	
                    }
                    function set_zhileng_close() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set10");//消息正文
                    }
                    function set_zhire_open() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set21");//消息正文	
                    }
                    function set_zhire_close() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set20");//消息正文
                    }
                    function set_chuanglian_open() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set31");//消息正文	
                    }
                    function set_chuanglian_close() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set30");//消息正文
                    }
                      function set_tou_open() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set41");//消息正文	
                        
                    }
                    function set_tou_close() {
                        var xhr = new XMLHttpRequest();//创建对象
                        var url = "";
                        xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
                        xhr.send("modbus_set40");//消息正文
                    }  
                    // 刷新数据
                    function refreshData() {  
                        const temperature =10; // 生成例如 10-40 的随机温度   (Math.random() * 30 + 10).toFixed(1)
                        const humidity = (Math.random() * 100).toFixed(1); // 生成例如 0-100 的随机湿度  
                        const light = (Math.random() * 1000).toFixed(1); // 生成例如 0-1000 的随机光照强度  
                
                        document.getElementById("temperature").innerText = temperature;  
                        document.getElementById("humidity").innerText = humidity;  
                        document.getElementById("light").innerText = light;  
                
                        alert("数据已刷新！");  
                    }  
                
                    // 上报数据显示  
                    function reportData() {  
                        const temperature = document.getElementById("temperature").innerText;  
                        const humidity = document.getElementById("humidity").innerText;  
                        const light = document.getElementById("light").innerText;  
                
                        // 模拟上报数据  
                        console.log("上报数据：");  
                        console.log("温度:", temperature);  
                        console.log("湿度:", humidity);  
                        console.log("照明:", light);  
                        alert("数据已经上报！");  
                    }  
                </script>
                    <script type="text/javascript">
                        function init() {
                            refresh();
                            //刷新
                        }
                
                        function refresh() {
                            var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
                            var url = ""; // 请求的URL
                
                            xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求
                            // var post_req = {
                //32码
                //                 "data": [{
                //     "name": "temp",
                //     "key": "301",
                //     "val": "27.19"
                // }, {
                //     "name": "humi",
                //     "key": "302",
                //     "val": "36.73"
                // }, {
                //     "name": "fan",
                //     "key": "303",
                //     "val": "0"
                // }, {
                //     "name": "motor",
                //     "key": "304",
                //     "val": "0"
                // }, {
                //     "name": "led_pwm",
                //     "key": "305",
                //     "val": "0"
                // }, {
                //     "name": "fire",
                //     "key": "306",
                //     "val": "0"
                // }]
                // };
                            //post请求块
                            //           "type": 1,
                            // "limit": "all"
                            // 空调开关等
                    //         function toggle(elementId) {  
                    //     const element = document.getElementById(elementId);  
                    //     if (element.innerText === "OFF") {  
                    //         element.innerText = "ON";  
                    //         alert(`${elementId} 已开启`);  
                    //     } else {  
                    //         element.innerText = "OFF";  
                    //         alert(`${elementId} 已关闭`);  
                    //     }  
                    // }  
                            xhr.onreadystatechange = function() {
                                if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
                                    var response = xhr.responseText; // 获取响应数据
                                    var info = JSON.parse(response)  //将json字符串反序列化为json对象
                                    console.log(info); // 在浏览器控制台打印响应数据
                                    for (var i = 0; i < info.data.length; i++) {
                                        // console.log('data = ', info.data[i].val)
                
                                        if (info.data[i].key == 1) {
                                            document.getElementById('temp').value = info.data[i].val;
                                        } else if (info.data[i].key == 2) {
                                            document.getElementById('hum').value = info.data[i].val;
                                        } else if (info.data[i].key == 3) {
                                            document.getElementById('ill').value = info.data[i].val;
                                        }
                                    }						
                                }
                            };
                            //将json对象序列化为json字符串
                            xhr.send(JSON.stringify(post_req)); // 发送请求，并将数据转换为JSON字符串
                        }
                    </script>
            </body>  </div>
            <!--消息区 -->
    <div style="height: 400px" class=" mgt 8yinYing" >
        <!-- baiSe -->
        <center>
            <img src="http://192.168.51.102:8080/?action=stream" alt="This is a static snapshot" />
          </center>
    </div>
</div>
</div>
</div>	
</body>
</html>